<template>
  <div class="login-container">
    <van-cell-group class="login-card">
      <div class="logo-container">
        <img src="../../public/logo3.jpg" alt="Logo" class="logo"/>
        <h2 class="ft-c-g">{{ title }}</h2>
        <p>{{ subtitle }}</p>
      </div>
      <!-- 登录 -->
      <van-form v-if="isLogin === 0" class="form-container">
        <van-field v-model="loginForm.mobile" placeholder="手机号"/>
        <van-field v-model="loginForm.password" type="password" placeholder="密码"/>
        <div class="agreement-checkbox">
          <van-checkbox v-model="agreeToTerms">
            阅读并接受
            <span class="agreement-link" @click.stop="showUserAgreement">《用户协议》</span>
            与
            <span class="agreement-link" @click.stop="showPrivacyPolicy">《隐私政策》</span>
          </van-checkbox>
        </div>
        <van-button block type="success" style="background-color: #059669" @click="handleLogin">登录
        </van-button>
        <div class="tip-btn-box">
          <span class="ft-c-999" style="float: left;" @click="isLogin = 2">忘记密码?</span>
          <span style="float: right">还没有账号? <span class="tip-btn text-success"
                                                       @click="isLogin = 1">立即注册</span></span>
        </div>

      </van-form>
      <!-- 注册 -->
      <van-form v-if="isLogin === 1" class="form-container">
        <van-field v-model="registerForm.mobile" placeholder="手机号"/>
        <van-field v-model="registerForm.password" type="password" placeholder="密码"/>
        <van-field v-model="registerForm.rePassword" type="password" placeholder="确认密码"/>
        <van-field v-model="registerForm.code" placeholder="验证码">
          <template #button>
            <van-button size="small" :disabled="captchaDisabled" @click="getCaptcha(5)">
              {{ captchaButtonText }}
            </van-button>
          </template>
        </van-field>
        <div class="offline-checkbox">
          <van-checkbox v-model="isOfflineUser">
            线下用户
          </van-checkbox>
          <van-icon name="question-o" class="help-icon" @click.stop="showOfflineUserTip"/>
        </div>
        <van-field v-if="isOfflineUser" v-model="registerForm.name" placeholder="您线下登记的姓名"/>
        <van-field v-if="isOfflineUser" v-model="registerForm.idCard" placeholder="您线下登记的证件号"/>
        <div class="agreement-checkbox">
          <van-checkbox v-model="agreeToTerms">
            阅读并接受
            <span class="agreement-link" @click.stop="showUserAgreement">《用户协议》</span>
            与
            <span class="agreement-link" @click.stop="showPrivacyPolicy">《隐私政策》</span>
          </van-checkbox>
        </div>
        <van-button block type="success" style="background-color: #059669" @click="handleRegister">注册
        </van-button>
        <div class="tip-btn-box">
          已有账号?
          <span class="tip-btn text-success" @click="isLogin = 0">返回登录</span>
        </div>
      </van-form>
      <!-- 重置密码 -->
      <van-form v-if="isLogin === 2" class="form-container">
        <van-field v-model="registerForm.mobile" placeholder="手机号"/>
        <van-field v-model="registerForm.password" type="password" placeholder="新密码"/>
        <van-field v-model="registerForm.rePassword" type="password" placeholder="确认密码"/>
        <van-field v-model="registerForm.code" placeholder="验证码">
          <template #button>
            <van-button size="small" :disabled="captchaDisabled" @click="getCaptcha(4)">
              {{ captchaButtonText }}
            </van-button>
          </template>
        </van-field>
        <van-button block type="success" style="background-color: #059669" @click="handleRePassword">
          确认重置
        </van-button>
        <div class="tip-btn-box">
          <span class="tip-btn text-success" @click="isLogin = 0">返回登录</span>
        </div>
      </van-form>
    </van-cell-group>
  </div>
  <div class="main-footer">
    成都市武侯区图书馆主办
   
    <!--        <div class="ban-box" @click="toBan">蜀ICP备2025140449号</div>-->

  </div>

  <!-- 自定义用户协议弹窗 -->
  <div v-if="showAgreementDialog" class="custom-dialog-overlay" @click="closeAgreementDialog">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>用户协议</h3>
        <button class="close-btn" @click="closeAgreementDialog">×</button>
      </div>
      <div class="custom-dialog-content">
        <div class="custom-dialog-message">{{ userAgreementContent }}</div>
      </div>
      <div class="custom-dialog-footer">
        <button class="confirm-btn" @click="closeAgreementDialog">同 意</button>
      </div>
    </div>
  </div>

  <!-- 自定义隐私政策弹窗 -->
  <div v-if="showPrivacyDialog" class="custom-dialog-overlay" @click="closePrivacyDialog">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>隐私政策</h3>
        <button class="close-btn" @click="closePrivacyDialog">×</button>
      </div>
      <div class="custom-dialog-content" > 
        <div class="custom-dialog-message">{{ privacyPolicyContent }}</div>
      </div>
      <div class="custom-dialog-footer">
        <button class="confirm-btn" @click="closePrivacyDialog">同 意</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, watch} from "vue";
import {useRouter} from "vue-router";
//@ts-ignore
import {authApi} from "../api/auth.ts";
import {onMounted} from 'vue';
import {showDialog, showToast} from 'vant';

const router = useRouter()
const isLogin = ref(0);
const loginForm = ref({
  mobile: "",
  password: "",
});
const registerForm = ref({
  mobile: "",
  password: "",
  rePassword: "",
  name: "",
  idCard: "",
  code: "",
});

const isOfflineUser = ref(false);
const agreeToTerms = ref(false);

// 监听线下用户状态变化，未勾选时清空相关字段
watch(isOfflineUser, (newValue) => {
  if (!newValue) {
    registerForm.value.name = "";
    registerForm.value.idCard = "";
  }
});

const showOfflineUserTip = () => {
  showDialog({
    title: '线下用户说明',
    message: '在线下进行过登记漂书的用户，注册可填写线下登记信息，系统会自动关联历史漂书记录。',
    confirmButtonText: '我知道了'
  });
};

// 弹窗状态管理
const showAgreementDialog = ref(false);
const showPrivacyDialog = ref(false);

// 用户协议内容
const userAgreementContent = `一、协议生效条件
本用户注册协议（以下简称"协议"）自用户点击"同意"或"注册"按钮后生效，且用户应仔细阅读并理解本协议的各项条款。

二、用户资格
1、用户必须是具有完全民事行为能力的自然人或法人实体，能够独立承担法律责任。
2、用户应保证所提供信息的真实性、准确性和完整性，如因信息不实导致的法律责任，由用户自行承担。

三、账户安全
1、用户应妥善保管自己的账号和密码，不得将其泄露给他人，如因账号密码被盗用产生的损失，由用户自行承担。
2、用户应定期更换密码，以提高账户安全性。
3、用户在使用账号过程中，如发现任何非法使用或安全漏洞，应及时通知平台方。

四、使用规则
1、用户在使用平台服务时，应遵守国家法律法规和平台规定，不得从事非法活动。
2、用户不得利用平台进行任何形式的虚假宣传或欺诈行为，如因此产生的法律责任，由用户自行承担。
3、用户应尊重他人知识产权和其他合法权益，不得上传或传播任何违法、违规内容。

五、服务变更与终止
1、平台方有权根据业务需要，对平台服务进行变更或终止，但会提前通知用户。
2、在服务变更或终止时，平台方会尽量保障用户数据的安全和隐私，但如因不可抗力因素导致数据丢失或泄露，平台方不承担任何责任。
3、用户在服务变更或终止时，应积极配合平台方完成相关数据的备份和迁移工作。

六、争议解决
如用户与平台方在协议履行过程中发生争议，应首先通过友好协商解决。协商不成的，任何一方均可向有管辖权的人民法院提起诉讼。
在争议解决过程中，除涉及争议部分外，其他条款仍需继续履行。
本协议的最终解释权归平台方所有。

七、其他条款
1、用户在使用平台服务时，应遵守平台方发布的各项细则和公告，如违反规定产生的后果由用户自行承担。
2、平台方会保护用户的隐私安全，不会泄露用户个人信息，但如因司法机关调查或不可抗力因素导致信息泄露，平台方不承担任何责任。
3、用户在注册和使用平台服务时，应遵守社会公德和商业道德，不得损害他人利益和社会公共利益。

`;

// 隐私政策内容
const privacyPolicyContent = `一、政策简介
本隐私保护政策旨在帮助用户了解在使用"书来书往"平台时，如何收集、使用、存储和保护其个人信息。请仔细阅读本政策，以便了解您的权利和我们的责任。

二、信息收集
"书来书往"可能会在以下情况下收集用户个人信息：
1、用户在注册、登录或使用"书来书往"服务时提供的信息。
2、用户在使用过程中自动生成的信息，例如设备信息和使用日志。

三、信息使用
我们收集的个人信息将用于以下目的：
1、提供、维护和改进"书来书往"的服务。
2、向用户发送服务通知、更新和推广信息。
3、分析用户使用情况，以优化用户体验。

四、信息共享
"书来书往"承诺不会将用户的个人信息出售或出租给第三方。我们可能在以下情况下分享用户的信息：
1、在法律法规要求下，或响应合法的法律请求。
2、为保护用户及公众利益而必要（如调查欺诈行为）。

五、信息安全
我们将采取必要的技术和管理措施，保护用户的个人信息，防止未授权访问、篡改、泄露或损毁。

六、用户权利
用户在任何时候均可请求访问、更正或删除其个人信息。用户也可以选择停止接收我们的营销信息。

七、政策变更
本隐私保护政策可能会不时更新。变更将在"书来书往"平台上通知用户，并在政策生效前给予用户合理的通知或选择。

八、联系方式
如有任何问题或建议，请联系"书来书往"客服团队

`;

const showUserAgreement = () => {
  showAgreementDialog.value = true;
};

const showPrivacyPolicy = () => {
  showPrivacyDialog.value = true;
};

const closeAgreementDialog = () => {
  showAgreementDialog.value = false;
};

const closePrivacyDialog = () => {
  showPrivacyDialog.value = false;
};

const captchaDisabled = ref(false);
const captchaButtonText = ref("获取验证码");

const title = computed(() => isLogin.value === 0 ? "书来书往" : isLogin.value === 1 ? "用户注册" : "重置密码");
const subtitle = computed(() => isLogin.value === 1 ? "加入书来书往，开启阅读分享之旅" : "知识的流动，阅读的分享");

const handleLogin = () => {
  // 检查是否同意用户协议和隐私政策
  if (!agreeToTerms.value) {
    showToast('请先阅读并同意用户协议与隐私政策');
    return;
  }
  
  if (!validatePhoneNumber(loginForm.value.mobile)) {
    showToast('请输入正确的手机号码');
    return;
  }
  if (!loginForm.value.password || loginForm.value.password.length < 6) {
    showToast('请输入密码');
    return;
  }
  authApi.login(loginForm.value).then((res: any) => {
    localStorage.setItem("token", res.accessToken);
    //跳转到首页
    showToast("登录成功");
    router.push({path: '/home'});
  });
};

const handleRegister = () => {
  console.log("注册表单提交", registerForm.value);

  // 检查是否同意用户协议和隐私政策
  if (!agreeToTerms.value) {
    showToast('请先阅读并同意用户协议与隐私政策');
    return;
  }

  // 如果未勾选线下用户，清空姓名和身份证字段
  if (!isOfflineUser.value) {
    registerForm.value.name = "";
    registerForm.value.idCard = "";
  }

  if (registerForm.value.password !== registerForm.value.rePassword) {
    showToast('两次密码不一致');
    return;
  }
  if (registerForm.value.password.length < 6) {
    showToast('请输入最少6位密码');
    return;
  }
  if (!validatePhoneNumber(registerForm.value.mobile)) {
    showToast('请输入正确的手机号码');
    return;
  }

  // 勾选了线下用户时，姓名和身份证为必填项
  if (isOfflineUser.value) {
    if (!registerForm.value.name) {
      showToast('请输入姓名');
      return;
    }
    if (!validateIdCard(registerForm.value.idCard)) {
      showToast('请输入正确的身份证');
      return;
    }
  }

  authApi.register(registerForm.value).then((res) => {
    console.log("注册成功", res);
    showDialog({
      message: '注册成功',
    }).then(() => {
      isLogin.value = 0
    });
  });
};

const handleRePassword = () => {
  console.log("重置表单提交", registerForm.value);
  if (registerForm.value.password !== registerForm.value.rePassword) {
    showToast('两次密码不一致');
    return;
  }
  if (registerForm.value.password.length < 6) {
    showToast('请输入最少6位密码');
    return;
  }
  authApi.resetPassword(registerForm.value).then((res) => {
    console.log("注册成功", res);
    showDialog({
      message: '重置密码成功',
    }).then(() => {
      isLogin.value = 0
    });
  });
};

const getCaptcha = (scene: number) => {
  if (!validatePhoneNumber(registerForm.value.mobile)) {
    showToast('请输入正确的手机号码');
    return;
  }
  //判断registerForm.value.mobile值是否正确
  captchaDisabled.value = true;
  let countdown = 60;
  const timer = setInterval(() => {
    countdown--;
    captchaButtonText.value = `${countdown}秒后重试`;
    if (countdown === 0) {
      clearInterval(timer);
      captchaDisabled.value = false;
      captchaButtonText.value = "获取验证码";
    }
  }, 1000);
  let params = {
    mobile: registerForm.value.mobile,
    scene: scene
  }
  authApi.sendSmsCode(params).then((res) => {
    console.log("验证码发送", res);
    showToast("验证码已发送");
  });
};

const validatePhoneNumber = (phoneNumber) => {
  if (!phoneNumber) {
    console.log("手机号码不能为空");
    return false;
  }
  // 手机号码正则表达式（中国大陆）
  const phoneNumberRegex = /^1[3-9]\d{9}$/;
  if (!phoneNumberRegex.test(phoneNumber)) {
    console.log("手机号码格式不正确");
    return false;
  }
  return true;
}
//校验身份证号码
/**
 * 校验中国大陆 18 位身份证号码格式
 * @param idCard 身份证号码
 * @returns {boolean} 是否有效
 */
const validateIdCard = (idCard) => {
  if (!idCard) {
    console.log("身份证号码不能为空");
    return false;
  }
  // 18位身份证号码正则表达式（包含最后一位校验码逻辑）
  const idCardRegex = /^[1-9]\d{5}(?:18|19|20|21|22|23|24|25|26|27|28|29|30|31)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
  if (!idCardRegex.test(idCard)) {
    console.log("身份证号码格式不正确");
    return false;
  }
  return true;
};


const toBan = () => {
  window.location.href = 'https://beian.miit.gov.cn/'
}


/** 初始化 **/
onMounted(() => {

})
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;

  h2 {
    margin-bottom: 8px;
    margin-top: 8px;
  }

  .logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
  }

  p {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin: 0;
  }
}

.login-card {
  width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  top: -50px;
  box-shadow: 0 4px 10px rgba(180, 180, 180, 0.08);
  z-index: 99;
}


.tip-btn-box {
  margin-top: 12px;
  text-align: center;
}

.tip-btn {
  margin-left: 6px;
  cursor: pointer;
}

.main-footer {
  position: absolute;
  bottom: 20px;
  margin: auto;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #898989;
  font-weight: lighter;
}

.ban-box {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin-top: 14px;
}

::v-deep .van-field {
  padding: 8px 16px;
}

.offline-checkbox {
  padding: 12px 16px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-icon {
  margin-left: 8px;
  color: #999;
  font-size: 16px;
  cursor: pointer;
}

::v-deep .van-checkbox__icon--checked .van-icon {
  background-color: #059669;
  border-color: #059669;
}

.agreement-checkbox {
  padding: 12px 16px;
  border-bottom: 1px solid #ebedf0;
  font-size: 12px;
  line-height: 1.5;
}

.agreement-links {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.agreement-link {
  color: #059669;
  cursor: pointer;
  text-decoration: none;
}

.agreement-link:hover {
  color: #047857;
}

.separator {
  margin: 0 8px;
  color: #ccc;
}

/* 自定义弹窗样式 */
.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.custom-dialog {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #ebedf0;
  flex-shrink: 0;
}

.custom-dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: center;
  flex: 1;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #666;
}

.custom-dialog-content {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.custom-dialog-message {
  padding: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  text-align: left;
  white-space: pre-line;
  max-height: 50vh;
  overflow-y: auto;
}

.custom-dialog-footer {
  padding: 16px 20px;
  border-top: 1px solid #ebedf0;
  flex-shrink: 0;
  text-align: center;
}

.confirm-btn {
  background-color: #059669;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  min-width: 80px;
}

.confirm-btn:hover {
  background-color: #047857;
}

.confirm-btn:active {
  background-color: #065f46;
}

</style>
